<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/js/jquery-1.8.2.min.js"></script>
</head>
<body>
<!--style="background-color: #CCCCCC;border: 1px red solid"-->
<div class="container">
    <form role="form">
        <img src="" alt="" width="530px" height="300px">
        <div class="form-group" style="background-color: red">
            <span id="goodsName" style="color: white;font-weight: bold"></span>
            ￥<span id="goodsPrice" style="font-size: 20px;color: white"></span>&emsp;<font color="red" style="background-color: #CCCCCC;size: 12px">预估到手:￥</font><span class="eventPrice" style="color: red;font-weight: bold;background-color: #CCCCCC"></span>
            <span id="endTime" hidden></span>
            <span id="djs"></span>
        </div>
    </form>
    <div class="form-group" style="text-align: right">
        <button id="buy" class="btn btn-danger" style="color: white">立即购买预估<br>￥<span class="eventPrice" style="color: white"></span></button>
    </div>
</div>
</body>
<script>
    //回显
    $.post(
        "/order/echo",
        {"middleId":[[${param.middleId}]]},
        function (a) {
            $("#goodsName").text(a.goodsName);
            $("img").attr("src",a.goodsImg);
            $("#goodsPrice").text(a.goodsPrice);
            $(".eventPrice").text(a.eventPrice);
            $("#endTime").text(a.endTime);
            var time = new Date($("#endTime").html()).getTime()-new Date().getTime();
            $("#djs").html("距离结束还剩:"+(Math.floor(time/1000/3600))+"小时"+Math.floor(time/1000/60%60)+"分钟"+Math.floor(time/1000%60)+"秒")
        }
    )

    //刷新
    function refresh(){
        $.post(
            "/order/echo",
            {"middleId":[[${param.middleId}]]},
            function (a) {
                var time = new Date($("#endTime").html()).getTime()-new Date().getTime();
                $("#djs").html("距离结束还剩:"+(Math.floor(time/1000/3600))+"小时"+Math.floor(time/1000/60%60)+"分钟"+Math.floor(time/1000%60)+"秒")
            }
        )
    }

    //定时每秒钟刷新
    setInterval(refresh,1000);

    //按钮跳转至结算界面
    $("#buy").click(function () {
        location = "/indent/goOrder?middleId="+[[${param.middleId}]];
    })



</script>
</html>
